<template>
    <div>
        <div v-for="item in list" :key="item.id" class="box">
            <div>
                <img :src="item.img" alt="">
            </div>
            <div>
                <span>{{ item.goodsname }}</span><br>
                <span>￥{{ item.price }}</span><br>
                <span> 购买数量<button @click="minus">-</button> <input type="number" v-model="num"> <button
                        @click="plus">+</button></span><br>
                <button>加入购物车</button><button>立即购买</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            num: 0
        };
    },

    mounted() {
        this.getlist()
    },

    methods: {
        async getlist() {
            await this.$http({
                url: '/api/getgoodsinfo',
                params: {
                    id: 10
                }
            }).then(res => {
                this.list = res.data.list
                console.log(this.list);
            })
        },
        plus() {
this.num++
        },
        minus(){
            this.num--
        }
    },
};
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: red;

    input {
        width: 30px;
    }
}
</style>